// 基本信息
import DialogBox from "@/components/DialogBox";
import { defineComponent, PropType } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { getPageList } from "@/api/modules/iot/variable";
import SelectDeptList from "@/components/Sansan/SelectDeptList";
import { TYPE_NAME } from "@/components/JsonSchemaForm/type/type";
import OnlineStatus from "@/components/Sansan/Status/OnlineStatus";
import { useDict } from "@/hooks/useDict";
import { deptAnonymous } from "@/utils/constants";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm | any>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const validData = () => {
			emit("submit", proTable.value.selectedList);
		};
		onMounted(async () => {});

		const proTable = ref<any>();
		// 表格配置项
		const columns: ColumnProps[] = [
			{ prop: "devSn", label: "设备SN", isShow: false, search: { el: "input" } },
			{ prop: "devName", label: "设备名称", isShow: false, search: { el: "input" } },
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "onlineStatus", label: "状态", width: 80 },
			{ prop: "sn", label: "设备SN", width: 180 },
			{ prop: "key", label: "变量名", sortable: true },
			// { prop: "key", label: "变量标识", sortable: true },
			{ prop: "type", label: "数据类型" },
			{ prop: "value", label: "实时值" },
			// { prop: "tags", label: "变量标签" },
			{ prop: "updateTime", label: "更新时间", width: 170, sortable: true },
			{ prop: "deptName", label: "分组", width: 180, search: { slot: {} } }
		];
		const getTableList = async (params: any) => {
			return getPageList(params);
		};
		const initParam = reactive({
			deptId: "",
			devSn: "",
			keyNot: "timestamp",
			deptIdNot: deptAnonymous,
			sortOrder: "desc",
			sortField: "update_time"
		});
		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current || 1,
				pageSize: data.size
			};
		};
		const { variableDictMap } = useDict();
		return () => {
			return (
				<DialogBox {...attrs} width={props.width} title={props.title} onConfirm={() => validData()}>
					<ProTable
						ref={proTable}
						title=""
						columns={columns}
						requestApi={getTableList}
						initParam={initParam}
						dataCallback={dataCallback}
					>
						{{
							"search-deptName": () => {
								return <SelectDeptList appendChild onChange={(val: any) => (initParam.deptId = val.id)} />;
							},
							type: (scope: any) => {
								return TYPE_NAME[scope.row.type] || scope.row.type || TYPE_NAME[typeof scope.row.value];
							},
							onlineStatus: (scope: any) => {
								return <OnlineStatus v-model={scope.row.onlineStatus} onlineLabel="在线" offlineLabel="离线" />;
							},
							value: (scope: any) => {
								let value = scope.row.data ? scope.row.data[scope.row.key] : "";
								return (
									<div class="truncate cursor-pointer primary-color">
										{value instanceof Object
											? JSON.stringify(value)
											: variableDictMap.value[scope.row.sn + "_" + scope.row.key]?.find(dict => dict.key == value)?.label ||
											  value ||
											  "--"}
										{scope.row.config ? scope.row.config[scope.row.key]?.unit : ""}
									</div>
								);
							}
						}}
					</ProTable>
				</DialogBox>
			);
		};
	}
});
